<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            margin: 0;
            padding: 0;
        }

        .tab-container {
            display: flex;
            background-color: #1e1e1e;
            border-bottom: 1px solid #333;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            user-select: none;
        }

        .tab.active {
            background-color: #333;
        }

        .content {
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #333;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #1e1e1e;
        }

        input[type="text"],
        input[type="number"] {
            background-color: #333;
            color: #e0e0e0;
            border: 1px solid #555;
            padding: 5px;
            margin-right: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #chart-container {
            margin-top: 20px;
        }
    </style>
</head>

<body>
<div class="tab-container">
    <div class="tab active" data-target="home">首页</div>
    <div class="tab" data-target="student">学生信息</div>
    <div class="tab" data-target="course">课程信息</div>
    <div class="tab" data-target="grade">成绩信息</div>
    <div class="tab" data-target="teacher">教师信息</div>
</div>
<div class="content">
    <div id="home" class="page">
        <h2>首页 - 成绩统计图表</h2>
        <div id="chart-container"></div>
    </div>
    <div id="student" class="page" style="display: none;">
        <h2>学生信息管理</h2>
        <input type="text" id="student-name" placeholder="姓名">
        <input type="number" id="student-age" placeholder="年龄">
        <button onclick="addStudent()">添加</button>
        <table id="student-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="course" class="page" style="display: none;">
        <h2>课程信息管理</h2>
        <input type="text" id="course-name" placeholder="课程名称">
        <input type="number" id="course-credit" placeholder="学分">
        <button onclick="addCourse()">添加</button>
        <table id="course-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>课程名称</th>
                <th>学分</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="grade" class="page" style="display: none;">
        <h2>成绩信息管理</h2>
        <input type="number" id="grade-student-id" placeholder="学生ID">
        <input type="number" id="grade-course-id" placeholder="课程ID">
        <input type="number" id="grade-score" placeholder="成绩">
        <button onclick="addGrade()">添加</button>
        <table id="grade-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>学生ID</th>
                <th>课程ID</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="teacher" class="page" style="display: none;">
        <h2>教师信息管理</h2>
        <input type="text" id="teacher-name" placeholder="姓名">
        <input type="text" id="teacher-subject" placeholder="教授科目">
        <button onclick="addTeacher()">添加</button>
        <table id="teacher-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>教授科目</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<script>
    const tabs = document.querySelectorAll('.tab');
    const pages = document.querySelectorAll('.page');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            const target = tab.dataset.target;
            pages.forEach(page => {
                if (page.id === target) {
                    page.style.display = 'block';
                } else {
                    page.style.display = 'none';
                }
            });
        });
    });

    function saveData(key, data) {
        localStorage.setItem(key, JSON.stringify(data));
    }

    function loadData(key) {
        const data = localStorage.getItem(key);
        return data ? JSON.parse(data) : [];
    }

    // 学生信息管理
    let students = loadData('students');
    const studentTable = document.getElementById('student-table').getElementsByTagName('tbody')[0];
    function addStudent() {
        const name = document.getElementById('student-name').value;
        const age = parseInt(document.getElementById('student-age').value);
        if (name && !isNaN(age)) {
            const id = students.length + 1;
            students.push({ id, name, age });
            saveData('students', students);
            renderStudents();
            document.getElementById('student-name').value = '';
            document.getElementById('student-age').value = '';
        }
    }

    function renderStudents() {
        studentTable.innerHTML = '';
        students.forEach(student => {
            const row = studentTable.insertRow();
            row.insertCell(0).textContent = student.id;
            row.insertCell(1).textContent = student.name;
            row.insertCell(2).textContent = student.age;
            const actionsCell = row.insertCell(3);
            const editButton = document.createElement('button');
            editButton.textContent = '编辑';
            editButton.onclick = () => editStudent(student.id);
            actionsCell.appendChild(editButton);
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = () => deleteStudent(student.id);
            actionsCell.appendChild(deleteButton);
        });
    }

    function editStudent(id) {
        const student = students.find(s => s.id === id);
        if (student) {
            document.getElementById('student-name').value = student.name;
            document.getElementById('student-age').value = student.age;
            students = students.filter(s => s.id !== id);
            saveData('students', students);
            renderStudents();
        }
    }

    function deleteStudent(id) {
        students = students.filter(s => s.id !== id);
        saveData('students', students);
        renderStudents();
    }

    // 课程信息管理
    let courses = loadData('courses');
    const courseTable = document.getElementById('course-table').getElementsByTagName('tbody')[0];
    function addCourse() {
        const name = document.getElementById('course-name').value;
        const credit = parseInt(document.getElementById('course-credit').value);
        if (name && !isNaN(credit)) {
            const id = courses.length + 1;
            courses.push({ id, name, credit });
            saveData('courses', courses);
            renderCourses();
            document.getElementById('course-name').value = '';
            document.getElementById('course-credit').value = '';
        }
    }

    function renderCourses() {
        courseTable.innerHTML = '';
        courses.forEach(course => {
            const row = courseTable.insertRow();
            row.insertCell(0).textContent = course.id;
            row.insertCell(1).textContent = course.name;
            row.insertCell(2).textContent = course.credit;
            const actionsCell = row.insertCell(3);
            const editButton = document.createElement('button');
            editButton.textContent = '编辑';
            editButton.onclick = () => editCourse(course.id);
            actionsCell.appendChild(editButton);
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = () => deleteCourse(course.id);
            actionsCell.appendChild(deleteButton);
        });
    }

    function editCourse(id) {
        const course = courses.find(c => c.id === id);
        if (course) {
            document.getElementById('course-name').value = course.name;
            document.getElementById('course-credit').value = course.credit;
            courses = courses.filter(c => c.id !== id);
            saveData('courses', courses);
            renderCourses();
        }
    }

    function deleteCourse(id) {
        courses = courses.filter(c => c.id !== id);
        saveData('courses', courses);
        renderCourses();
    }

    // 成绩信息管理
    let grades = loadData('grades');
    const gradeTable = document.getElementById('grade-table').getElementsByTagName('tbody')[0];
    function addGrade() {
        const studentId = parseInt(document.getElementById('grade-student-id').value);
        const courseId = parseInt(document.getElementById('grade-course-id').value);
        const score = parseInt(document.getElementById('grade-score').value);
        if (!isNaN(studentId) && !isNaN(courseId) && !isNaN(score)) {
            const id = grades.length + 1;
            grades.push({ id, studentId, courseId, score });
            saveData('grades', grades);
            renderGrades();
            document.getElementById('grade-student-id').value = '';
            document.getElementById('grade-course-id').value = '';
            document.getElementById('grade-score').value = '';
        }
    }

    function renderGrades() {
        gradeTable.innerHTML = '';
        grades.forEach(grade => {
            const row = gradeTable.insertRow();
            row.insertCell(0).textContent = grade.id;
            row.insertCell(1).textContent = grade.studentId;
            row.insertCell(2).textContent = grade.courseId;
            row.insertCell(3).textContent = grade.score;
            const actionsCell = row.insertCell(4);
            const editButton = document.createElement('button');
            editButton.textContent = '编辑';
            editButton.onclick = () => editGrade(grade.id);
            actionsCell.appendChild(editButton);
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = () => deleteGrade(grade.id);
            actionsCell.appendChild(deleteButton);
        });
    }

    function editGrade(id) {
        const grade = grades.find(g => g.id === id);
        if (grade) {
            document.getElementById('grade-student-id').value = grade.studentId;
            document.getElementById('grade-course-id').value = grade.courseId;
            document.getElementById('grade-score').value = grade.score;
            grades = grades.filter(g => g.id !== id);
            saveData('grades', grades);
            renderGrades();
        }
    }

    function deleteGrade(id) {
        grades = grades.filter(g => g.id !== id);
        saveData('grades', grades);
        renderGrades();
    }

    // 教师信息管理
    let teachers = loadData('teachers');
    const teacherTable = document.getElementById('teacher-table').getElementsByTagName('tbody')[0];
    function addTeacher() {
        const name = document.getElementById('teacher-name').value;
        const subject = document.getElementById('teacher-subject').value;
        if (name && subject) {
            const id = teachers.length + 1;
            teachers.push({ id, name, subject });
            saveData('teachers', teachers);
            renderTeachers();
            document.getElementById('teacher-name').value = '';
            document.getElementById('teacher-subject').value = '';
        }
    }

    function renderTeachers() {
        teacherTable.innerHTML = '';
        teachers.forEach(teacher => {
            const row = teacherTable.insertRow();
            row.insertCell(0).textContent = teacher.id;
            row.insertCell(1).textContent = teacher.name;
            row.insertCell(2).textContent = teacher.subject;
            const actionsCell = row.insertCell(3);
            const editButton = document.createElement('button');
            editButton.textContent = '编辑';
            editButton.onclick = () => editTeacher(teacher.id);
            actionsCell.appendChild(editButton);
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.onclick = () => deleteTeacher(teacher.id);
            actionsCell.appendChild(deleteButton);
        });
    }

    function editTeacher(id) {
        const teacher = teachers.find(t => t.id === id);
        if (teacher) {
            document.getElementById('teacher-name').value = teacher.name;
            document.getElementById('teacher-subject').value = teacher.subject;
            teachers = teachers.filter(t => t.id !== id);
            saveData('teachers', teachers);
            renderTeachers();
        }
    }

    function deleteTeacher(id) {
        teachers = teachers.filter(t => t.id !== id);
        saveData('teachers', teachers);
        renderTeachers();
    }

    // 添加测试数据
    function addTestData() {
        if (students.length === 0) {
            for (let i = 1; i <= 10; i++) {
                students.push({ id: i, name: `学生${i}`, age: 18 + i % 3 });
            }
            saveData('students', students);
            renderStudents();
        }
        if (courses.length === 0) {
            for (let i = 1; i <= 10; i++) {
                courses.push({ id: i, name: `课程${i}`, credit: 3 + i % 2 });
            }
            saveData('courses', courses);
            renderCourses();
        }
        if (grades.length === 0) {
            for (let i = 1; i <= 10; i++) {
                grades.push({ id: i, studentId: i % 10 + 1, courseId: i % 10 + 1, score: 60 + Math.floor(Math.random() * 40) });
            }
            saveData('grades', grades);
            renderGrades();
        }
        if (teachers.length === 0) {
            for (let i = 1; i <= 10; i++) {
                teachers.push({ id: i, name: `教师${i}`, subject: `科目${i % 5 + 1}` });
            }
            saveData('teachers', teachers);
            renderTeachers();
        }
    }

    addTestData();

    // 首页图表（简单示例，可根据需求替换为更复杂的图表库）
    function renderChart() {
        const chartContainer = document.getElementById('chart-container');
        const scores = grades.map(grade => grade.score);
        const maxScore = Math.max(...scores);
        const minScore = Math.min(...scores);
        const averageScore = scores.reduce((sum, score) => sum + score, 0) / scores.length;
        chartContainer.innerHTML = `
                <p>最高分: ${maxScore}</p>
                <p>最低分: ${minScore}</p>
                <p>平均分: ${averageScore.toFixed(2)}</p>
            `;
    }

    renderChart();
</script>
</body>

</html>
